import RenderdocImg from "@/assets/renderdoc.svg";
import { ArrowRightOutlined, UserOutlined } from "@ant-design/icons";
import { Card, message, Progress, Row, Space } from "antd";
import { useEffect, useState } from "react";
import { useModel } from "umi";
import styles from "./index.less";

const { ipcRenderer } = window.require("electron");

const Tools = () => {
  const [exist, setExist] = useState(false);
  const [loading, setLoading] = useState(false);
  const [progress, setProgress] = useState(0);
  const { EnvMode, isFullScreen } = useModel("env");

  useEffect(() => {
    ipcRenderer.invoke("renderdocExist").then((res: boolean) => {
      setExist(res);
    });
    ipcRenderer.on("download-progress", (event: Event, progress: number) => {
      setProgress(progress);
    });
  }, []);
  const download = () => {
    if (EnvMode !== "YELLOW") {
      message.error("蓝区暂不支持该功能，请到黄区尝试！");
      return;
    }
    if (exist) {
      ipcRenderer.invoke("vcruntimeExist").then((res: boolean) => {
        if (res) {
          ipcRenderer.invoke("startRenderdoc");
        } else {
          message.error("由于找不到VCRUNTIME140_1.dll，renderdoc启动失败！");
        }
      });
      return;
    }
    setLoading(true);
    ipcRenderer
      .invoke("downloadRenderdoc")
      .then(() => {
        setExist(true);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
      });
  };

  return (
    <div className={styles.container}>
      <div
        className={styles.content}
        style={{ gridTemplateColumns: `repeat(${isFullScreen ? 4 : 3}, 1fr)` }}
      >
        <Card className={styles.card}>
          <Space direction="vertical">
            <Row>
              <div className={styles.img}>
                <img src={RenderdocImg} />
              </div>
            </Row>
            <Row className={styles.title}>Renderdoc</Row>
            <Row className={styles.text}>
              免费的standalone开源图形调试器，可用于对虚幻引擎4(UE4)等应用程序执行单帧采集。
            </Row>
            <Row className={styles.operate}>
              {loading ? (
                <Progress
                  type="circle"
                  percent={progress}
                  format={(percent) =>
                    percent == 100 ? "解压" : `${percent}%`
                  }
                />
              ) : (
                <div className={styles.img} onClick={download}>
                  <ArrowRightOutlined style={{ fontSize: 18 }} />
                </div>
              )}
            </Row>
          </Space>
        </Card>
        {[1, 1, 1, 1, 1].map((item, index) => (
          <Card className={styles.card} key={index}>
            <Space direction="vertical">
              <Row>
                <div className={styles.img}>
                  <UserOutlined style={{ fontSize: 18, color: "white" }} />
                </div>
              </Row>
              <Row className={styles.title}>待接入</Row>
              <Row className={styles.text}>
                支持Android/iOS移动平台，待接入各类测试工具。
              </Row>
              <Row className={styles.operate}>
                <div className={styles.img}>
                  <ArrowRightOutlined style={{ fontSize: 18 }} />
                </div>
              </Row>
            </Space>
          </Card>
        ))}
      </div>
    </div>
  );
};

export default Tools;
